﻿@page "/buttons"
@page "/button"

<RadzenExample Name="Button">
<div class="row">
    <div class="col-xl-6">
        <div class="row">
            <div class="col-xl-6">
                <h4>Button with text</h4>
                <RadzenButton Click=@(args => OnClick("Button with text")) Text="Button" Style="margin-bottom: 20px; width: 150px" />
            </div>
            <div class="col-xl-6">
                <h4>Button with text and icon</h4>
                <RadzenButton Click=@(args => OnClick("Button with text and icon")) Text="Button" Icon="account_circle" Style="margin-bottom: 20px; width: 150px" />
            </div>
        </div>
        <div class="row">
            <div class="col-xl-6">
                <h4>Button with icon</h4>
                <RadzenButton Click=@(args => OnClick("Button with icon")) Icon="account_circle" Style="margin-bottom: 20px; width: 80px" />
            </div>
            <div class="col-xl-6">
                <h4>Button with image</h4>
                <RadzenButton Click=@(args => OnClick("Button with image")) Image="images/radzen-nuget.png" ButtonStyle="ButtonStyle.Light" Style="margin-bottom: 20px; width: 80px" />
            </div>
        </div>
        <div class="row">
            <div class="col-xl-6">
                <h4>Button with content</h4>
                <RadzenButton Click=@(args => OnClick("Button with content")) Image="images/radzen-nuget.png" ButtonStyle="ButtonStyle.Light" Style="margin-bottom: 20px; width: 200px">
                    Some text
                    <RadzenImage Path="images/radzen-nuget.png" Style="width:20px;margin-left: 10px;" />
                </RadzenButton>
            </div>
            <div class="col-xl-6">
                <h4>Disabled Button</h4>
                <RadzenButton Disabled="true" Text="Button" Style="margin-bottom: 20px; width: 150px" />
            </div>
        </div>
        <h4>Button styles</h4>
        <div class="row">
            <div class="col">
                <RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Primary button")) Text="Primary" ButtonStyle="ButtonStyle.Primary" />
                <RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Secondary button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
                <RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Light button")) Text="Light" ButtonStyle="ButtonStyle.Light" />
                <RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Danger button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" />
                <RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Info button")) Text="Info" ButtonStyle="ButtonStyle.Info" />
                <RadzenButton style="margin-bottom: 16px"   Click=@(args => OnClick("Warning button ")) Text="Warning" ButtonStyle="ButtonStyle.Warning" />
            </div>
        </div>
        <h4>Busy Indicator</h4>
        <div class="row">
            <div class="col-xl-6">
                <h5>Without BusyText</h5>
                <RadzenButton style="margin: 0 1rem 1rem 0; width: 150px" IsBusy=@busy Click=@OnBusyClick Text="Save" />
            </div>

            <div class="col-xl-6">
                <h5>With Busy Text</h5>
                <RadzenButton style="margin: 0 1rem 1rem 0; width: 200px" Icon="save" BusyText="Saving ..." IsBusy=@busy Click=@OnBusyClick Text="Save" />
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <EventConsole @ref=@console />
    </div>
</div>
</RadzenExample>

@code {
    EventConsole console;
    bool busy;

    void OnClick(string buttonName)
    {
        console.Log($"{buttonName} clicked");
    }

    async Task OnBusyClick()
    {
        busy = true;
        await Task.Delay(2000);
        busy = false;
    }
}
